<template>
  <div>
    <div class="advertisementBg">
      <img src="@/assets/ad.jpg" class="advertisement">
    </div>
    <div class="hotJobArea">
      <job-area
        hot-title='全部任务'
        :banner-img='bannerSrc'
        :hot-job-list='hotJobList'
      ></job-area>
    </div>
  </div>
</template>

<script>
import jobArea from '@/components/jobArea'
import { getTaskRecord } from '@/api/check'
export default {
  components: {
    'job-area': jobArea
  },
  data () {
    return {
      bannerSrc: require('@/assets/taskBanner.jpg'),
      hotJobList: []
    }
  },
  created () {
    const $this = this
    const brandId = JSON.parse(localStorage.getItem('BRANDMSG')).brandId
    getTaskRecord(1, 50, brandId).then(res => {
      console.log('getTaskRecord', res)
      $this.hotJobList = res.data.data.list
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.advertisementBg{
  background: #ffffff;
}
.advertisement{
  width: 95%;
  height: 260px;
  border-radius: 5px;
  margin: 10px auto;
  display: block;
}
.hotJobArea{
  background: #ffffff;
  overflow: hidden;
}
</style>
